<template>
  <div class="h-100 flex-column">
    <div id="table_contain" class="flex-100">
      <CustomTable :height="tableHeight" :columns="columns" v-loading="loading" :data="tableData" />
    </div>
    <Page
      :page-data="pageData"
      :total="total"
      @page-no-change="pageNoChange"
      @page-size-change="pageSizeChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import CustomTable from '@/components/CustomTable'
import Page from '@/components/Page.vue'
import { pageAuthSysUser } from '@/api/system'
import { usePage } from '@/hooks/usePage'
import { useCalcTableHeight } from '@/hooks/useCalcTableHeight'

const columns: any[] = [
  { prop: 'userName', label: '姓名', width: 100 },
  { prop: 'mobile', label: '电话', width: 120 },
  { prop: 'name', label: '组织', width: 220 }
]
const filterData = ref({ roleId: '' })
const { tableHeight } = useCalcTableHeight()
const { loading, tableData, pageData, total, search, pageNoChange, pageSizeChange } = usePage(
  pageAuthSysUser,
  filterData
)

const initList = (roleId?: string) => {
  filterData.value.roleId = roleId || ''
}

//列表分页查询
defineExpose({ initList })

onMounted(async () => {
  await search()
})
</script>

<style scoped lang="scss"></style>
